<template>
  <div>
    <!--<input> 元素上的原生事件 @input 每当输入一个字符，都会调用句柄 handleInput，
    并通过 dispatch 方法向上级的 FormItem 组件派发自定义事件 on-form-change-->
    <input type="text" :value="currentValue" @blur="handleBlur" @input="handleInput" />
  </div>
</template>

<script>
import emitter from "@mixins/emitter";
export default {
  name: "iInput",
  mixins: [emitter],
  props: {
    value: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      currentValue: this.value
    };
  },
  watch: {
    value(val) {
      this.currentValue = val;
    }
  },
  methods: {
    handleBlur() {
      this.dispatch("iFormItem", "on-form-blur", this);
    },
    handleInput(event) {
      const value = event.target.value;
      this.currentValue = value;
      this.$emit("input", value);
      this.dispatch("iFormItem", "on-form-change", value);
    }
  },
  mounted() {
    console.log("input中的mounted");
  }
};
</script>

<style></style>
